<template>
  <div class="zn-wrapper">

    <!--查询-->
    <div class="zn-search-header">
      <div class="search">
        <div v-for="item in searchData" :key="item.key" class="searchItem">
          <label for="">{{$t(`${name}.search.${item.key}`)}}：</label>
          <el-input size="small" :placeholder="$t('common.search')" v-model="search[item.key]" v-if="item.type === 'input'"></el-input>
        </div>
        <el-button size="mini" class="searchBtn" type="primary" icon="el-icon-search" @click="getList()"></el-button>
      </div>
    </div>
    <!--<div class="zn-select-up">-->
      <!--<el-tooltip class="item" effect="dark" :content="$t('common.delAll')" placement="top">-->
        <!--<el-button icon="el-icon-delete" size="mini" @click="delAll"></el-button>-->
      <!--</el-tooltip>-->
    <!--</div>-->
    <!--列表-->
    <div class="zn-main">
      <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" v-if="tableHeaderData.hasSelection">
        </el-table-column>
        <el-table-column v-for="header in tableHeaderData.data" :key="header.prop" :label="$t(`${name}.tableHead.${header.prop}`)" :prop="header.prop">
          <template slot-scope="scoped">
            <div v-if="header.type === 'img'">
              <img :src="scoped.row[header.prop]">
            </div>
            <div v-else-if="header.type === 'link'">
              <a :href="scoped.row[header.prop]">{{scoped.row[header.prop]}}</a>
            </div>
            <div v-else>
              {{scoped.row[header.prop]}}
            </div>
          </template>
        </el-table-column>
        <!--<el-table-column :label="$t('common.operate')" width="170">-->
          <!--<template slot-scope="scoped">-->
            <!--<div class="operate">-->
              <!--<el-tooltip class="item" effect="dark" :content="$t('common.view')" placement="top">-->
                <!--<el-button icon="el-icon-view" size="mini" @click="checkClick(scoped.row,scoped.$index)"></el-button>-->
              <!--</el-tooltip>-->
              <!--<el-tooltip class="item" effect="dark" :content="$t('common.edit')" placement="top">-->
                <!--<el-button icon="el-icon-edit" size="mini" @click="editClick(scoped.row,scoped.$index)"></el-button>-->
              <!--</el-tooltip>-->
              <!--<el-tooltip class="item" effect="dark" :content="$t('common.del')" placement="top">-->
                <!--<el-button icon="el-icon-delete" size="mini" @click="deleteClick(scoped.row.id,scoped.$index)"></el-button>-->
              <!--</el-tooltip>-->
            <!--</div>-->
          <!--</template>-->
        <!--</el-table-column>-->
      </el-table>
      <!--<div class="zn-select-down">-->
        <!--<el-tooltip class="item" effect="dark" :content="$t('common.delAll')" placement="top">-->
          <!--<el-button icon="el-icon-delete" size="mini" @click="delAll"></el-button>-->
        <!--</el-tooltip>-->
      <!--</div>-->
      <div class="zn-table-foot clearfix">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="page.pageSize"
          :page-sizes="[10, 50, 100, 200]"
          layout="sizes, total, prev, pager, next"
          :total="page.total">
        </el-pagination>
      </div>
    </div>

    <!-- 弹出新增框 -->
    <!--<el-dialog custom-class="addTem" :title="$t('common.add')" :visible.sync="addModel">-->
      <!--<el-form label-width="100px">-->
        <!--<el-form-item v-for="(item,index) in tableHeaderData.data" :key="index" :label="$t(`${name}.tableHead.${item.prop}`)">-->
          <!--<el-input v-model="addObj[item.prop]"></el-input>-->
        <!--</el-form-item>-->
      <!--</el-form>-->
      <!--<span slot="footer" class="dialog-footer">-->
        <!--<el-button @click="addModel = false">{{$t('common.cancel')}}</el-button>-->
        <!--<el-button type="primary" @click="addData">{{$t('common.confirm')}}</el-button>-->
      <!--</span>-->
    <!--</el-dialog>-->

    <!-- 弹出查看框 -->
    <!--<el-dialog custom-class="viewTem" :title="$t('common.view')" :visible.sync="checkModel">-->
      <!--<el-form label-width="100px">-->
        <!--<el-form-item v-for="(item,index) in tableHeaderData.data" :key="index" :label="$t(`${name}.tableHead.${item.prop}`)">-->
          <!--<label for="">{{checkObj[item.prop]}}</label>-->
        <!--</el-form-item>-->
      <!--</el-form>-->
      <!--<span slot="footer" class="dialog-footer">-->
        <!--<el-button @click="checkModel = false">{{$t('common.cancel')}}</el-button>-->
        <!--<el-button type="primary" @click="checkModel = false">{{$t('common.confirm')}}</el-button>-->
      <!--</span>-->
    <!--</el-dialog>-->

    <!-- 弹出编辑框 -->
    <!--<el-dialog custom-class="updateTem" :title="$t('common.edit')" :visible.sync="editModel">-->
      <!--<el-form label-width="100px">-->
        <!--<el-form-item v-for="(item,index) in tableHeaderData.data" :key="index" :label="$t(`${name}.tableHead.${item.prop}`)">-->
          <!--<el-input v-model="editObj[item.prop]"></el-input>-->
        <!--</el-form-item>-->
      <!--</el-form>-->
      <!--<span slot="footer" class="dialog-footer">-->
        <!--<el-button @click="editModel = false">{{$t('common.cancel')}}</el-button>-->
        <!--<el-button type="primary" @click="editData">{{$t('common.confirm')}}</el-button>-->
      <!--</span>-->
    <!--</el-dialog>-->

  </div>
</template>

<script>
  import * as config from "./data";
  import local from './local';
  import api from "@/api/goodsStockLog.service.js";

  export default {
    data() {
      return {
        name: null,
        search: {},
        searchData: [],
        tableData: [],
        tableHeaderData: {},
        key: "", //搜索关键字
        currentPage: 1,
        page: {
          pageNo: 1,
          pageSize: 10,
          total: null
        },
        selectAll: null
      };
    },
    created() {
      this.$i18n.mergeLocaleMessage('en',local.en)
      this.$i18n.mergeLocaleMessage('zh',local.zh)
      this.$i18n.mergeLocaleMessage('ko',local.ko)
      Object.keys(config).map(res => {
        this[res] = config[res]
      })
      this.getList()
    },
    methods: {
      getList() {
        // 调接口拿数据
        this.search.pageNo = this.page.pageNo
        this.search.pageSize = this.page.pageSize
        api.list(this.search).then(res => {
          this.tableData = res.values
          this.page.total = res.total
        })
      },
      handleSelectionChange(select) {
        this.selectAll = select
      },
      handleCurrentChange(pageNo) {
        this.page.pageNo = pageNo
        this.getList()
      },
      handleSizeChange(pageSize) {
        this.page.pageSize = pageSize
        this.getList()
      }
    }
  };
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .zn-op-header {
    margin-bottom:16px;
  }
  .good-detail {
    position: relative;
    padding-left: 80px;
    min-height: 80px;
  }
  .good-detail .good-pic {
    position: absolute;
    left: 0;
    top: 0;
  }
  .good-detail .good-pic img {
    height: 80px;
    width: 80px;
    padding: 1px;
    border: 1px solid #efefef;
  }
  .good-detail .good-content {
    width: 260px;
    padding: 10px;
  }
  .input-with-select {
    width: 300px;
  }
  .addTem, .el-form {
    display: grid;
    grid-template-columns: 50% 50%;
  }

  .updateTem .el-form {
    display: grid;
    grid-template-columns: 50% 50%;
  }

  .viewTem .el-form {
    display: grid;
    grid-template-columns: 50% 50%;
  }
  .zn-search-header {
    display: flex;
    justify-content: space-between;
    border: 1px solid #ddd;
    padding-top: 10px;
    margin-bottom:10px;
  }
  .search {
    display: flex;
    flex-wrap: wrap;
  }
  .searchItem {
    margin-right:20px;
    margin-bottom:10px;
    width: 300px;
    display: flex;
    align-items: center;
    label {
      flex: 1;
      text-align: right;
    }
  }
  .searchItem {
    .el-select {
      width: 200px!important;
    }
    .el-input {
      width: 200px!important;
    }
  }
  .searchBtn {
    height: 32px;
  }
  .operate {
    display: flex;
  }
  .zn-select-up {
    margin-bottom:16px;
  }
  .zn-select-down {
    margin-top:16px;
  }

</style>

<style>
  .zn-main .el-table__header-wrapper .cell {
    font-weight: normal;
    color: #000;
  }
</style>


